<template>
    <div>
        <el-container style="padding: 0px; margin: 0px; height: 90vh;">
            <el-header height="5%">
                <h1>留言版</h1>
            </el-header>
            <el-main height="60%">
                <el-table
                        :data="messages"
                        border
                        stripe
                        height="100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名字">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="留言">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="时间"
                            width="160">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer height="15%">
                <el-input
                        type="text"
                        placeholder="请输入你的名字"
                        v-model="notes.name"
                        maxlength="16"
                        show-word-limit
                >
                </el-input>
                <div style="margin: 20px 0;"></div>
                <el-input
                        type="textarea"
                        placeholder="请输入留言"
                        v-model="notes.content"
                        show-word-limit
                >
                </el-input>
                <div style="margin: 20px 0;"></div>
                <el-button type="primary" plain @click="postMessage">留言</el-button>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                notes: {
                    name: '',
                    content: ''
                },
                messages: []
            }
        },
        methods: {
            postMessage() {
                if (this.notes.name === '') {
                    this.$message.error('请输入你的名字');
                    return
                }

                if (this.notes.content === '') {
                    this.$message.error('请输入留言');
                    return
                }

                axios.post("http://localhost:8888/api/notes", {"name": this.notes.name, "content": this.notes.content}).then((t) => {
                    console.log(t.data.code);
                    if (t.data.code == 200) {
                        this.$message({
                            message: '留言成功',
                            type: 'success'
                        });
                        window.location.reload();
                    } else {
                        this.$message.error('留言失败');
                    }
                })
            }
        },
        created() {
            axios.get("http://localhost:8888/api/notes").then((t) => {
                console.log(t.data.data);
                this.messages = t.data.data;
            })
        }
    }
</script>